<template>
  <div class="cityList">

    <div class="cityData">
      <p>当日气温是：{{detailWeatherInfo.detailTemperature}}摄氏度</p>
      <p>当日天气是：{{detailWeatherInfo.detailWeather}}</p>
      <p>当日风向是：{{detailWeatherInfo.detailWindDirection}}</p>
      <p>当日风力是：{{ detailWeatherInfo.detailWindPower}}级</p>
    </div>

  </div>
</template>

<script setup>
import {ref, defineProps} from 'vue'

const props = defineProps({
  detailWeatherInfo: {
    type: Object,
    default: () => ({
      detailCity: '',
      detailTemperature: '',
      detailWeather: '',
      detailWindDirection: '',
      detailWindPower: ''
    })
  }
})
</script>

<style scoped lang="scss">
.cityList {
  margin-top: 10px;
  width: 100%;

  .cityData {
    display: flex;
    /*垂直*/
    flex-direction: column;
    /*水平*/
    justify-content: center;
    /*垂直*/
    align-items: center;
    gap: 1rem;

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: white;
    }
  }

}
</style>
